<template>
	<view class="control">
		<view class="" style="width: 100%;height: 100rpx;background-color: #EDF5F5;">
			<view class="box-1">
				<view class="postion">
					<!-- <u-navbar title="票务服务" :bgColor="navBgColor" :titleStyle="{ color: navColor }" fixed
						:autoBack="true" @rightClick="rightClick">
					</u-navbar> -->
				</view>
			</view>

			<!-- <attend-calendar :lateddates='lateddates' :truancyeddates='truancyeddates' :chidaodates='chidaodates'
				@on-click="handleChildClick">
			</attend-calendar> -->



			<!-- <view class="top_search">
				<view class="" style="width: 72%;">
					<u-search maxlength='-1' placeholder="搜索赛事" :showAction="false" v-model="keyword"
						@search="searchlist" bgColor="#fff">
					</u-search>
				</view>
				<view class="" style="display: flex;flex-direction: row; align-items: center;" @click="dropdownclick"
					v-if="dropmenu == true">
					<view class="" style="margin-right: 5rpx;">
						<u-icon name="calendar" size="20"></u-icon>
					</view>
					<view class="" style="font-size: 28rpx;margin-right: 5rpx;">
						赛事时间
					</view>
					<view class="" style="display: flex; justify-content: center;align-items: center;">
						<u-icon name="arrow-up-fill" size="15"></u-icon>
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: row; align-items: center;" @click="dropoffclick"
					v-if="dropmenu == false">
					<view class="" style="margin-right: 5rpx;">
						<u-icon name="calendar" color="#4BA677" size="20"></u-icon>
					</view>
					<view class="" style="font-size: 28rpx;margin-right: 5rpx;color: #4BA677;">
						演出时间
					</view>
					<view class="" style="display: flex; justify-content: center;align-items: center;">
						<u-icon name="arrow-down-fill" color="#4BA677" size="15"></u-icon>
					</view>
				</view>
			</view> -->
			
		</view>
		<view class="" style="width: 100%;">
			<u-swiper :list="banner" keyName="img" height="440rpx"
				@click="onswiperclick"></u-swiper>
			
		</view>
		<!-- <view class="" style="height: 80rpx;width: 100%;">
			<u-tabs :list="list3" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
				:inactiveStyle="{color: '#666666',}" lineColor="#4BA677" itemStyle="height: 38px;"
				@click=" tabonClick"></u-tabs>
		</view> -->



		<!-- <view class="">
			<view class="cons_contenter" v-show="dropdownmenu" @click="dropdownmenulist"></view>
			<view class="cons_con" v-show="dropdownmenu">
				
				<attend-calendar :lateddates='lateddates' :truancyeddates='truancyeddates' :chidaodates='chidaodates'
					@on-click="handleChildClick">
				</attend-calendar>
			</view>
		</view> -->

		<view class=""
			style="height: calc(100vh - 100rpx);background-color: #fff;border-radius: 30rpx 30rpx 0 0;margin-top: 20rpx;margin-bottom: 15rpx;">
			<!-- <van-dropdown-menu active-color='#4BA677'>
				<van-dropdown-item :value="value1" :options="option1" @change='onSwitchChange' />
				<van-dropdown-item :value="value2" :options="option2" @change='onSwitchChange' />
				<van-dropdown-item :value="value3" :options="option3" @change='onSwitchChange' />
			</van-dropdown-menu> -->
			<scroll-view scroll-y="true" class="scroll" style="height: 75vh;">
				<view class="" v-if="products.length >0"
					style="display: flex;flex-direction: column;padding:0rpx 0rpx 20rpx 0;border-bottom: 1rpx solid #e8e8e8;width: calc(100% - 40rpx);margin-left: 20rpx;">
					<view class="" v-for="(item, index) in products" :key="index"
						style="width: 710rpx;height: 160rpx;display: flex;flex-direction: row;align-items: center;margin-top: 20rpx;"
						@click="StoreDetaillist(item)">
						<view class="">
							<image style="width: 256rpx;height: 160rpx;border-radius: 12rpx;"
								:src="item.withActivity.index_img" mode="">
							</image>
						</view>
						<view class="" style="width: 500rpx;height: 160rpx;background: #ffffff;border-radius: 12rpx;">
							<view class="footer-xxqwe" style="margin-top: 16rpx;">{{ item.race_name }}</view>
							<!-- <view class="footer-xxw">{{item.sale_start}}</view> -->
							<!-- <view style="display: flex;flex-direction: row;	margin-top: 10rpx;padding-left: 20rpx;">
								<view
									style="width: 326rpx;font-size: 22rpx;color: #A6A6A6;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
									苏州体育中心
								</view>
							</view> -->
							<view class="footer-xxrer"
								style="display: flex;justify-content: space-between;padding: 0 60rpx 0 20rpx;margin-top: 25rpx;">
								
								<text style="color: #ff0000;font-size: 30rpx;">{{item.price_to_price}}</text>
								<!-- <textclass="footer-xxr2"></text> -->
							</view>
							<view class="footer-xxrer"
								style="display: flex;justify-content: space-between;padding: 0 60rpx 0 20rpx;margin-top: 15rpx;">
								<view class="">
									{{item.time}}
								</view>
								<!-- <text style="color: #4BA677;font-weight: 600;font-size: 24rpx;">¥{{item.outside_link_url}}</text> -->
								<!-- <textclass="footer-xxr2"></text> -->
							</view>
						</view>
					</view>

				</view>
				<view class="" v-else>
					<!-- <u-empty  text="暂无数据" icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" /> -->
					<u-empty mode="void"
						icon="https://oss.szsportscenter.cn/upload/2d/c9c9d19f7d661666e527715884c630.png?attname=huanxin.png" />
				</view>
			</scroll-view>


			<!-- <scroll-view scroll-y="true" class="scroll" style="height: 70vh;" v-if="tabindex == 1">
				<view class=""
					style="display: flex;flex-direction: column;padding:0rpx 0rpx 20rpx 0;border-bottom: 1rpx solid #e8e8e8;width: calc(100% - 40rpx);margin-left: 20rpx;">
					<view class="" v-for="(item, index) in products" :key="index"
						style="width: 710rpx;height: 160rpx;display: flex;flex-direction: row;align-items: center;"
						@click="StoreDetaillist(im)">
						<view class="">
							<image style="width: 256rpx;height: 160rpx;border-radius: 12rpx;" :src="kpaoo33" mode="">
							</image>
						</view>
						<view class="" style="width: 500rpx;height: 160rpx;background: #ffffff;border-radius: 12rpx;">
							<view class="footer-xxq" style="margin-top: 10rpx;">{{item.name}}</view>
							<view class="footer-xxw">2024.05.28 周六 9:00</view>
							
							<view class="footer-xxr">
								<text class="footer-xxr1" style="color: #4BA677;font-weight: 600;">¥140.00</text> <text
									class="footer-xxr2">起</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view> -->
			<!-- <scroll-view scroll-y="true" class="scroll" style="height: 70vh;" v-if="tabindex == 1">
				<view class="" style="display: flex;flex-direction: column;padding:0rpx 20rpx 20rpx 20rpx;">
					<view class=""
						style="width: 710rpx;height: 160rpx;display: flex;flex-direction: row;align-items: center;margin-top: 10rpx;border-bottom: 1rpx solid #e8e8e8;" @click="StoreDetaillist(im)">
						<view class="">
							<image style="width: 256rpx;height: 160rpx;border-radius: 12rpx;" :src="kpaoo33" mode="">
							</image>
						</view>
						<view class="" style="width: 500rpx;height: 160rpx;background: #ffffff;border-radius: 12rpx;">
							<view class="footer-xxq" style="margin-top: 10rpx;">【苏州】2024亚洲杯足球预选赛</view>
							<view class="footer-xxw">2024.05.28 周六 9:00</view>
							<view class="footer-xxr">
								<text class="footer-xxr1"
									style="color: #4BA677;font-weight: 400;">¥140.00</text> <text
									class="footer-xxr2">起</text>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view> -->
		</view>
		<!-- 门票购买 -->
		<!-- <view class="box-2">
			<view class="data-list1">
				<scroll-view scroll-y="true" class="scroll" style="height: 65vh;">
					<view class="data-item flex-align" @click="ongzh">
						<view class="image">
							<u--image
								src="https://suwentou.doit10019.com/upload/00/e1be963fd3d8ca9e72859a176d0e4d.png?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240228194253.png"
								width="180rpx" height="180rpx" radius="5"></u--image>
						</view>
						<view class="detail">
							<view>
								<view class="title ellipsis-1">
									<text>
										2026年国际中体联足球世界杯,相约苏州</text>
								</view>
								<view class="tag-list flex-align"
									style="font-size: 26rpx;margin-top: 20rpx;color: #999999;">
									2026年
								</view>
							</view>
							<view class="flex-between">
								<view class="" style="font-size: 26rpx;color: #999999;">
									苏文投集团
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view> -->
		<u-popup border-radius="14" mode='center' :mask-close-able="false" :closeable="false" :show="showPopup">
			<view class="not-logged-in">
				<view class="title">授权小程序</view>
				<u-image width="113" height="90" :src="logosrc" v-if="logosrc!=''"></u-image>
				<u-image width="113" height="90" :src="logo_src" v-else></u-image>
				<view class="desc">需要手机号授权登录</view>
				<view class="btns">
					<button class="btn2" @click="cancelogin">取消授权</button>
					<button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">立即授权</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import attendCalendar from '../../components/attends-calendar/attend-calendar';.
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	// import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
	const venues = require("@/api/venues/venues.js");
	const index = require("@/api/index/index.js");
	const personal = require('@/api/personal/index.js');
	export default {
		components: {
			QSNavbar,
			// uniRate,
			// attendCalendar,
		},
		data() {
			return {
				showPopup: false,
				logosrc: uni.getStorageSync("heading"),
				logo_src: this.$https.assetsPath + 'db34b1cd242d406763397f09ca0aa8e2371b81d4.png',
				banner:[],
				lateddates: ['2024-7-11', '2024-7-8', '2024-7-20'],
				chidaodates: ['2024-7-25', '2024-7-3', '2024-7-18'],
				truancyeddates: ['2024-7-25', '2024-7-18', '2024-7-20'],
				icon1: this.$https.assetsPath + '58d1bf2665b8c20e302f02c56274f0ce972df8b4.png',
				icon2: this.$https.assetsPath + 'kpaoo11.png',
				icon3: this.$https.assetsPath + 'kpaoo22.png',
				kpaoo44: this.$https.assetsPath + 'kpaoo44.png',
				kpaoo33: this.$https.assetsPath + 'kpaoo33.png',
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "center",
						width: 15,
						doEvent: "back",
						iconColor: "#000000",
					},
					{
						type: "text",
						text: "票务服务",
						width: 70,
						weight: "bold",
						color: "#000000",
						textAlign: "left",
					},
				],
				list1: [],
				list2: [{
						name: "余氯含量"
					},
					{
						name: "PH值"
					},
					{
						name: "水温"
					},
					{
						name: "温度"
					}
				],
				list3: [{
						name: "演 艺"
					},
					{
						name: "赛 事"
					},

				],
				venueDetail: {},
				timeData: {},
				menuActive: '',
				products: [],
				id: 0,
				belong: 'enroll',
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 1000,
				},
				totalPage: '', //几页
				index_list: {},
				tabindex: 0,
				option1: [{
						text: '演出场馆',
						value: 0
					},
					{
						text: '南通场馆',
						value: 1
					},
					{
						text: '苏州场馆',
						value: 2
					},
					{
						text: '南京场馆',
						value: 3
					},
				],
				option2: [{
						text: '演出时间',
						value: 'a'
					},
					{
						text: '2014-6-20',
						value: 'b'
					},
					{
						text: '2014-6-28',
						value: 'c'
					},
					{
						text: '2014-7-20',
						value: 'd'
					}
				],
				option3: [{
						text: '演出系列',
						value: 'w'
					},
					{
						text: '京剧',
						value: 'e'
					},
					{
						text: '流行歌曲',
						value: 'r'
					},
					{
						text: '小品',
						value: 't'
					},
				],
				value1: 0,
				value2: 'a',
				value3: 'w',
				keyword: '', //搜索
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#000000',
				TrainProduct: [],
				droplist: [{
					name: '价格由低到高',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}, {
					name: '价格由高到低',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}, {
					name: '销量排序',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}],
				dropdownmenu: false,
				dropmenu: true,
				riqidate: ''
			};
		},
		onLoad(options) {
			var _this = this
			uni.login({
				success(res) {
					_this.loginCode = res.code
				}
			})
			this.id = options.id;
			// this.belong = options.belong;
			this.menuActive = options.menuActive;
			this.getVenueDetail(options.id);
			this.getCoperateDate()
			// this.getRaceProductByHot()
			uni.setNavigationBarTitle({
				title: '赛事活动'
			});

		},
		methods: {
			onGetPhoneNumber(e) {
				var _this = this
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				} else {
					// 获取手机号并解密
					uni.checkSession({
						success() {
							// session未过期,并且在本生命周期一直有效 (这里可以不写代码)
						},
						fail() {
							// session_key已失效,需要重新登录流程并更新code
							uni.login({
								success(res) {
									_this.loginCode = res.code
								}
							})
						},
						complete() {
							// 将code,iv,encryptedData传给后端进行解密
							let params = {
								appid: _this.$https.weixinAppId,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								code: _this.loginCode,
								project_id: getApp().globalData.projectId,
								references: uni.getStorageSync("openidlist"),
								invite_code: uni.getStorageSync("codescene") //二维码用户openid
							}
							_this.appletPhoneLogin(params)
						}
					})
			
				}
			},
			cancelogin() {
				this.showPopup = false
			},
			async appletPhoneLogin(params) {
				let that = this
				let data = params
				let result = await personal.appletPhoneLogin(data)
				if (result.code == 1) {
					uni.setStorageSync('phone', result.data.phone)
					uni.setStorageSync('openid', result.data.openid)
					that.showPopup = false
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '授权失败，请稍后再试'
					})
				}
			},
			// 首页培训购买产品展示
			async getCoperateDate() {
				let that = this;
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					shop_id: 213

				};
				let res = await venues.getCoperateDate(data);
				if (res.code == 1) {
					const dates = res.data.hot //hot 热门活动
					const array1 = dates.map(date => {
						const parts = date.split('-');
						if (parts[1].startsWith('0')) {
							parts[1] = parseInt(parts[1], 10);
						}
						if (parts[2].startsWith('0')) {
							parts[2] = parseInt(parts[2], 10);
						}
						return parts.join('-');
					});

					const date_s = res.data.normal //normal 普通活动
					const array2 = date_s.map(date => {
						const parts = date.split('-');
						if (parts[1].startsWith('0')) {
							parts[1] = parseInt(parts[1], 10);
						}
						if (parts[2].startsWith('0')) {
							parts[2] = parseInt(parts[2], 10);
						}
						return parts.join('-');
					});


					const uniqueArray1 = array2.filter(date => !array1.includes(date));

					//chidaodates hot 热门活动
					//truancyeddates normal 普通活动
					this.chidaodates = array1
					this.truancyeddates = uniqueArray1
				}
			},
			// 日历点击
			handleChildClick(date) {
				console.log('父组件收到子组件的点击事件，日期为:', date);
				this.riqidate = date
				this.riliInfo = true
				this.dropdownmenu = false
				this.dropmenu = true
				this.products = []
				this.keyword = ''
				this.getcatelist()
			},
			// 首页培训购买产品展示
			async getRaceProductByHot() {
				let that = this;
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					shop_id: 213

				};
				let result = await index.getRaceProductByHot(data);
				if (result.code == 1) {
					this.TrainProduct = result.data
				}
			},
			// 搜索
			searchlist() {
				this.getcatelist()
			},
			onSwitchChange(e) {},
			StoreDetaillist(item) {
				if (item.sign_type == 'race') {
					uni.navigateTo({
						url: '/pages_other/race/race?id=' + item.id +
							"&venue_name=" +
							this.venueDetail.venue_name +
							'&venue_id=' +
							this.venueDetail.id +
							'&cate_type=' +
							item.cate_type +
							'&windows=' +
							item.windows
					})
				} else if (item.sign_type == 'detail') {
					uni.navigateTo({
						url: '../../../page_find/webview3?id=' + item.id
					})
				} else if (item.sign_type == 'redirect') {
					uni.navigateTo({
						url: '../../../page_find/webview1?outside_link_url=' + item.outside_link_url
					})
				} else if (item.sign_type == 'applet') {
					wx.navigateToMiniProgram({
						shortLink: item.outside_link_url,
						envVersion: 'release', // 根据目标环境选择 develop/trial/release
						success(res) {
							console.log("跳转成功");
						}
					});
				} else if (item.sign_type == 'list') {
					if (uni.getStorageSync("openid") == '' || uni.getStorageSync("openid") == null) {
						this.showPopup = true
					} else {
						uni.navigateTo({
							url: '../../../page_find/find_race/race_index?id=' + item.id + "&name=" + item.name
						})
					}
					
				}
			},
			offguanbi() {
				this.infocapsule = false
			},
			// 获取场馆详情
			async getVenueDetail(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'top'
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetail = result.data;
					this.windows = result.data.windows
					this.getDetaillist(this.id, 0)
				}
			},
			async getDetaillist(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'cate',
					belong: this.belong,

				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.list3 = result.data.cates;
					// this.cate_id = this.list3[0].id
					this.getcatelist()
				}
			},
			async getcatelist() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.products = [];
				let postData = {
					// shop_id: this.id,
					// project_id: getApp().globalData.projectId,
					// app_id: this.$https.weixinAppId,
					// block: 'products',
					// belong: this.belong,
					// // cate_id: this.cate_id,
					// cate_id: 2,
					// page: this.listQuery.pageNo,
					// limit: this.listQuery.pageSize,
					// keyword:this.keyword,
					// search_date:this.riqidate
					shop_id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'products',
					belong: this.belong,
					cate_id: '',
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					keyword: this.keyword,
					search_date: this.riqidate

				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					// this.products = result.data.products.data
					that.keyword = ''
					that.products = that.products.concat(result.data.products); //将数据拼接在一起
					that.totalPage = result.data.products.last_page
					this.banner = result.data.banners
				}
			},
			// 滚动加载
			// onReachBottom() {
			// 	// uni.showLoading({
			// 	// 	title: '加载中'
			// 	// });
			// 	if (this.totalPage <= this.listQuery.pageNo) {
			// 		// uni.hideLoading();
			// 		uni.showToast({
			// 			title: '没有更多了',
			// 			duration: 2000,
			// 			icon: 'none'
			// 		});
			// 		return
			// 	}
			// 	this.listQuery.pageNo += 1;
			// 	this.getcatelist()
			// 	// this.getcatelist(this.list1[0].id)
			// },
			// 之前详情
			openStoreDetail() {
				// uni.navigateTo({
				// 	url: "/page_points/storeDetail/storeDetail",
				// });
				uni.navigateTo({
					url: "/pages_other/venue_details/venue_details?venues_id=" + this.id,
				});
			},

			//切换菜单
			// changeMenu(item, index, nameSign) {
			// 	this.listQuery.pageNo = 1
			// 	this.products = []
			// 	this.list1 = []
			// 	this.menuActive = nameSign;
			// 	this.getDetaillist(item, this.id, index);

			// },
			tabonClick(index) {
				this.tabindex = index.index
				this.products = []
				this.keyword = ''
				this.ticketproducts = []
				this.cardproducts = []
				this.listQuery.pageNo = 1
				this.index_list = index
				this.cate_id = index.id
				this.getcatelist()
			},
			// 蒙版关闭
			dropdownmenulist() {
				this.dropdownmenu = false
				this.dropmenu = true
			},
			// 打开蒙版/选择
			dropdownclick() {
				this.dropdownmenu = true
				this.dropmenu = false
			},
			dropoffclick() {
				this.dropdownmenu = false
				this.dropmenu = true
			},
			// 分类点击
			fieldclick(item, index) {
				this.dateActive = index
				setTimeout(() => {
					this.dropdownmenu = false
				}, 200)
			},
			ondatalist4(item, index) {
				uni.navigateTo({
					url: '/pages_other/race/race?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id +
						'&cate_type=' +
						item.cate_type +
						'&windows=' +
						item.windows
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	@import url("@/static/css/index/index.css");

	.control {
		width: 100%;
		// min-height: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #EDF5F5;
		
		.not-logged-in {
			width: 619rpx;
			height: 508rpx;
			background-color: #FFFFFF;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 999999;
			border-radius: 10rpx;
		
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #000000;
				text-align: center;
				padding-top: 43rpx;
			}
		
			.close {
				color: #AAAAAAFF;
				font-size: 40rpx;
				font-weight: bold;
				position: absolute;
				right: 30rpx;
				top: 20rpx;
			}
		
			/deep/ .u-image {
				margin: auto;
				margin-top: 52rpx;
			}
		
			.desc {
				font-size: 30rpx;
				color: #000000;
				font-weight: bold;
				text-align: center;
				margin-top: 20rpx;
			}
		
			.desc2 {
				color: #ADADADFF;
				font-size: 26rpx;
				text-align: center;
				margin-top: 18rpx;
			}
		
			.btns {
				display: flex;
		
				.btn {
					width: 50%;
					height: 100rpx;
					position: absolute;
					bottom: 0;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 34rpx;
					color: #4BA677;
					border-top: 1px solid #E6E6E6FF;
				}
		
				.btn2 {
					width: 50%;
					height: 100rpx;
					position: absolute;
					bottom: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 34rpx;
					color: #000;
					border-top: 1px solid #E6E6E6FF;
				}
			}
		}

		/deep/.u-tabs {
			// background-color: #fff;
			// margin: 0 20rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		/deep/ .van-dropdown-menu {
			// background-color: var(--dropdown-menu-background-color, #fff);
			background-color: rgba(0, 0, 0, 0);
			box-shadow: none !important;
			display: flex;
			height: var(--dropdown-menu-height, 50px);
			-webkit-user-select: none;
			user-select: none;
		}

		.top_search {
			padding: 30rpx 30rpx 0rpx 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			// margin-top: 150rpx;
			// background-color: #fff;


			.label8_list {
				display: flex;
				flex-direction: column;
				position: absolute;
				justify-content: center;
				/* 相对父元素水平居中 */
				align-items: center;
				/*  子元素相对父元素垂直居中 */
				right: 20rpx;
				width: 80rpx;
				top: 27rpx;

				.label_8 {
					width: 36rpx;
					height: 36rpx;
				}

				.label_88 {
					width: 60rpx;
					height: 36rpx;
					color: #333333;
					font-size: 26rpx;
					text-align: center;
				}
			}
		}
	}

	.box-1 {
		position: relative;
		width: 100%;

		>image {
			display: block;
			width: 100%;
		}

		.postion {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			box-sizing: border-box;
		}

		.box-1-con {
			image {
				display: block;
				width: 100%;
			}

			.box-1-dian {
				height: 120rpx;
				padding: 0px 30rpx;
				margin-top: 19rpx;

				.image {
					width: 160rpx;
					height: 100%;
					// overflow: hidden;

					image {
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
					}
				}

				.dian-info {
					margin-left: 20rpx;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					.title {
						color: rgb(255, 255, 255);
						font-size: 33rpx;
						font-weight: 700;
					}

					/deep/ .u-tag-wrapper {
						margin-right: 20rpx;

						.u-tag {
							border-radius: 17px;
							font-size: 26rpx;
							height: 40rpx;
							padding: 0px 15rpx;
						}
					}

					.desc {
						color: rgb(255, 255, 255);
						font-size: 22rpx;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 380rpx;
					}
				}

				.btn {
					color: rgb(255, 255, 255);
					background-color: #F7E9CC;
					border-radius: 17px;
					font-size: 26rpx;
					height: 40rpx;
					padding: 0px 15rpx;
					// padding: 5rpx 20rpx;
					margin-top: 60rpx;
					color: #675034;
					line-height: 40rpx;
				}
			}
		}

		.box-2-con {
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 0px 30rpx;

			.list {
				display: flex;
				overflow-x: auto;
				border-radius: 20rpx;
				background-image: url("https://oss.szsportscenter.cn/img/7a2e7ef51359cc5e18cbee07dc7fb1bc5230398b.png");
				background-repeat: no-repeat;
				padding-bottom: 40rpx;
				background-size: 100% calc(100% - 40rpx);

				.active {
					font-weight: 700;

					text {
						font-size: 22rpx !important;
						margin-top: 20rpx !important;
					}

					.jian {
						opacity: 1 !important;
					}
				}

				.item {
					height: 130rpx !important;
					flex-shrink: 0;
					width: 140rpx;
					padding: 23rpx 0rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					position: relative;

					.icon {
						width: 50rpx;
						height: 50rpx !important;
					}

					text {
						margin-top: 18rpx;
						font-size: 20rpx;
					}

					.jian {
						position: absolute;
						width: 50rpx;
						transition: all 0.3s;
						height: 30rpx;
						opacity: 0;
						bottom: -20rpx;
					}
				}
			}
		}
	}

	.box-2 {
		// padding: 0px 30rpx;
		padding: 0px 10rpx;
		margin-left: 20rpx;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		transform: translateY(-60rpx);
		margin-top: 50rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;

		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
			}
		}

		// 列表1
		.data-list1 {
			margin-top: 20rpx;

			.write {
				width: 690rpx;
				height: 90rpx;
				background: linear-gradient(135deg, #F5FFFB 0%, #CCF0E0 100%, #FFFFFF);
				border-radius: 12rpx 12rpx 0rpx 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #CCF0E0;

				.wri_img {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}

				.wri_tex {
					font-size: 28rpx;
					color: #4BA677;
					margin-left: 10rpx;
				}
			}

			.onadd {
				// /deep/.u-tabs {
				// 	background-color: #fff;
				// 	// margin: 0 20rpx;

				// 	.u-tabs__wrapper__nav__item {
				// 		flex: 1;
				// 	}

				// 	.u-tabs__wrapper__nav__line {
				// 		bottom: 0;
				// 	}
				// }
			}


			.ph_write {
				width: 690rpx;
				height: auto;
				background: #FFFFFF;
				// box-shadow: 0rpx -2rpx 15rpx 0rpx rgba(223,182,134,0.31);
				border: rgba(75, 166, 119, 0.4);
				border-radius: 0rpx 0rpx 10rpx 10rpx;
				margin-bottom: 20rpx;


				/deep/.u-tabs {
					background-color: #fff;
					// margin: 0 30rpx;

					.u-tabs__wrapper__nav__item {
						flex: 1;
					}

					.u-tabs__wrapper__nav__line {
						bottom: 0;
					}
				}
			}



			.data-item {
				margin-top: 20rpx;
				height: 210rpx;
				width: 690rpx;
				background-color: #ffffff;
				padding: 10rpx;
				// border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				border-radius: 12rpx;
				// box-shadow: 30px 2px 10px #f9f9f9;

				.image {
					padding-left: 10rpx;
					width: 180rpx;
					height: 180rpx;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 180rpx;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.ellipsis-1 {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: bold;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}

					.tiemr {
						color: #cfcfcf;
						font-size: 22rpx;
					}

					.price {
						font-size: 36rpx;
						color: #4BA677;
						font-weight: bold;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #cfcfcf;
						font-size: 22rpx;
						text-decoration: line-through;
					}
				}
			}
		}



	}

	.cons_contenter {
		position: absolute;
		animation-duration: 0.2s;
		width: 100%;
		height: 95%;
		top: 206rpx;
		left: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.7);
		transition: opacity 0.3s;
	}

	.cons_con {
		position: absolute;
		animation-duration: 0.2s;
		width: 100%;
		height: auto;
		top: 100rpx;
		left: 0;
		z-index: 999;
		background-color: #fff;
		transition: opacity 0.3s;
		// padding: 0 30rpx;
	}

	.cons_con_contenter {
		width: 90%;
		height: 80rpx;
		// padding: 0 30rpx;
		border-bottom: 1rpx #e5e5e5 solid;
		margin-left: 5%;
		line-height: 80rpx;
	}

	.date-item_right {
		color: #e5e5e5;
		float: right;
	}

	.date-item_left {
		float: left;
	}

	.footer-xxqwe {
		font-size: 26rpx;
		line-height: 33rpx;
		margin-top: 18rpx;
		color: #333333;
		font-weight: 600;
		width: 500rpx;
		padding: 0 20rpx;
		// height: 70rpx;
	}

	.footer-xxrer {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		line-height: 33rpx;
		width: 500rpx;
		padding: 0 20rpx;
		// margin-top: 30rpx;
		font-size: 24rpx;
		color: #949494;
	}
</style>